<!DOCTYPE html>
<html>

<head>
    <title>arcgis map river</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <!-- <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"> -->
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0px 0 0 0;
        }

        #mapCanvas {
            padding: 0;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true,
            packages: [{
                name: 'extend',
                location: this.location.pathname.replace(/\/[^/]+$/, "") + "/plugins"
            }]
        };
    </script>
    <script type="text/javascript" src="../build/arcgis-map-branchRiver.js"></script>
    <script src="https://js.arcgis.com/3.23/"></script>
    <!-- <script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> -->
</head>

<body>
    <div id="mapCanvas">
    </div>
    <script>
        var map, rasterLayer, branchRiver;
        var canvasSupport;
        require(["esri/map",
                "esri/request",
                "dojo/parser",
                "dojo/number",
                "dojo/json",
                "esri/geometry/Point",
                // "extend/TDTTilesLayer",
                "extend/RasterLayer",
                "dojo/domReady!"
            ],
            function (Map,
                esriRequest,
                parser,
                number,
                JSON,
                Point,
                // TDTTilesLayer,
                RasterLayer
            ) {
                parser.parse();
                canvasSupport = supports_canvas();
                map = new Map("mapCanvas", {
                    center: [110.67037693948942, 32.61283084506727],
                    zoom: 9,
                    basemap: "dark-gray-vector",
                });

                map.on("load", mapLoaded);

                function mapLoaded() {
                    // Add raster layer
                    if (canvasSupport) {
                        baseLayer = new RasterLayer(null, {
                            opacity: .3
                        });
                        animateLayer = new RasterLayer(null, {
                            opacity: 1
                        });
                        topLayer = new RasterLayer(null, {
                            opacity: 1
                        });
                        map.addLayers([baseLayer, animateLayer, topLayer]);
                        map.on("extent-change", redraw);
                        map.on("resize", function () {});
                        map.on("zoom-start", redraw);
                        map.on("pan-start", redraw);
                        var layersRequest = esriRequest({
                            url: 'data/river-branch.json',
                            content: {},
                            handleAs: "json"
                        });
                        //加载站点json数据
                        var request = esriRequest({
                            url: 'data/riverpoint.json',
                            content: {},
                            handleAs: "json"
                        });
                        layersRequest.then(
                            function (response) {
                                lines = [{
                                    type: 0,
                                    list: []
                                }];
                                for (var i = 0; i < response.features.length; i++) {
                                    var feature = response.features[i];
                                    var attribute = feature.attributes;
                                    var grade = attribute.grade === 0;
                                    var geometry = feature.geometry;
                                    var childLine = {
                                        type: attribute.grade,
                                        list: []
                                    };
                                    if (grade) {
                                        for (var j = 0; j < geometry.paths[0].length; j++) {
                                            var point = geometry.paths[0][j];
                                            lines[0]['list'].push(new Point({
                                                "x": point[0].toFixed(6),
                                                "y": point[1].toFixed(6),
                                                "spatialReference": {
                                                    "wkid": 4326
                                                }
                                            }));
                                        }
                                    } else {
                                        for (var j = 0; j < geometry.paths[0].length; j++) {
                                            var point = geometry.paths[0][j];
                                            childLine['list'].push(new Point({
                                                "x": point[0].toFixed(6),
                                                "y": point[1].toFixed(6),
                                                "spatialReference": {
                                                    "wkid": 4326
                                                }
                                            }));
                                        }
                                        lines.push(childLine);
                                    }
                                }

                                request.then(
                                    function (response1) {
                                        stations = [];
                                        for (var i = 0; i < response1.features.length; i++) {
                                            var feature = response1.features[i];
                                            var attribute = feature.attributes;
                                            var grade = attribute.grade.substr(0, 1);
                                            var geometry = feature.geometry;
                                            var stationName = attribute.name;
                                            var station = {
                                                name: attribute.name,
                                                grade: grade,
                                                point: new Point({
                                                    "x": geometry.x.toFixed(6),
                                                    "y": geometry.y.toFixed(6),
                                                    "spatialReference": {
                                                        "wkid": 4326
                                                    }
                                                })
                                            };
                                            stations.push(station);
                                        }
                                        branchRiver = new BranchRiver(map, {
                                            type: 'point', //点或箭头或圆点,point,arrow,circle
                                            grap: 10, //粒子间隔倍数,数字越大显示的粒子越少
                                            isShowBaseLine: false, //是否显示底层线条
                                            lineWidth: .5, //底层线条宽度
                                            lineStyle: '#C82800', //线条颜色
                                            isShowTail: true, //是否显示粒子尾巴动画效果
                                            tailOpacity: .9, //尾巴动画透明度
                                            animateLineWidth: 2, //尾巴动画线条宽度
                                            renderLineWidth: [4, 2.3, 0.9, 0.5], //尾巴动画线条宽度
                                            // colors: ["#b5c334", "#59c4e6", "#edafda", "#a5e7f0"],
                                            colors: ["#61a5e8", "#eecb5f", "#7ecf51", "#e16757"],
                                            animateLineStyle: '#ffff00', //尾巴动画线条颜色
                                            canvas: baseLayer._element,
                                            animateCanvas: animateLayer._element,
                                            topCanvas: topLayer._element,
                                            data: lines,
                                            stations: stations
                                        });
                                        redraw();
                                    },
                                    function (error) {
                                        console.log("Error: ", error.message);
                                    }
                                );
                            },
                            function (error) {
                                console.log("Error: ", error.message);
                            }
                        );

                    } else {
                        dom.byId("mapCanvas").innerHTML =
                            "This browser doesn't support canvas";
                    }
                }

                // does the browser support canvas?
                function supports_canvas() {
                    return !!document.createElement("canvas").getContext;
                }

                function redraw() {
                    baseLayer._element.width = map.width;
                    baseLayer._element.height = map.height;
                    animateLayer._element.width = map.width;
                    animateLayer._element.height = map.height;
                    topLayer._element.width = map.width;
                    topLayer._element.height = map.height;
                    branchRiver.start();
                }
            });
    </script>
</body>

</html>